<template>
    <div class='center-container'>
        <div class="top">
            <div class="top-item" v-for="v in CenterTopItems" :key="v.label">
                <div class="label" :style="{ backgroundColor: v.color }">{{ v.label }}</div>
                <div class="value"
                    :style="{ backgroundImage: `linear-gradient(to top, ${v.transcolor} 0%, transparent 20%)` }">
                    <AnimationNumber :value="v.value"></AnimationNumber>
                </div>
            </div>
        </div>
        <div class="center">
            <img class="map" src="@/assets/center/map.png" alt="">
            <div class="name" v-for="v in CenterCenterItems" :key="v.url" :style="{ left: v.left, top: v.top }">
                <img :src="v.url" :style="{ width: v.width }" alt="">
                <div class="line" :style="{ height: v.lineHeight }"></div>
            </div>
            <div class="pic" v-for="v in CenterCenterPics" :key="v.url" :style="{ left: v.left, top: v.top }">
                <img :src="v.url" :style="{ width: v.width }" alt="">
            </div>
        </div>
        <div class="bottom">
            <Circle></Circle>
            <img class="circle" src="@/assets/center/circle.png" alt="">
        </div>
    </div>
</template>
<script setup lang='ts'>
import { CenterTopItems } from '../constants/center/centerTopItems'
import { CenterCenterItems, CenterCenterPics } from '../constants/center/centerCenterItems'
import { onMounted } from 'vue'
import Circle from './circle.vue'
onMounted(() => {
    setInterval(() => {
        CenterTopItems.value.forEach((v) => {
            v.value += parseInt(String(Math.random() * 20 - Math.random() * 10))
        })
    }, 2000)
})
</script>
<style lang='scss' scoped>
.center-container {
    width: 964px;
    position: relative;

    .top {
        position: absolute;
        top: 80px;
        width: 673px;
        height: 100px;
        background-color: #050A32;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: space-around;
        align-items: center;

        .top-item {
            width: 140px;
            border-radius: 6px;
            overflow: hidden;

            .label {
                color: #fff;
                font-size: 12px;
                padding: 4px 8px;

            }

            .value {
                color: #fff;
                font-size: 16px;
                padding: 20px 10px;
            }
        }
    }

    .center {
        position: absolute;
        width: 100%;
        left: 0;
        top: 310px;
        height: 545px;

        .map {
            position: absolute;
            left: -2.5%;
            width: 105%;
            object-fit: cover;
        }

        .name {
            position: absolute;
            padding: 10px 15px;
            background: url(@/assets/center/border.png) no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: move 4s infinite;

            &:nth-child(2n) {
                animation-delay: 0.5s;
            }

            img {
                object-fit: cover;
            }

            .line {
                position: absolute;
                width: 4px;
                border-radius: 4px;
                background: linear-gradient(to bottom, #81511C 0%, #81511Caa 70%, transparent 100%);
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        .pic {
            position: absolute;

            img {
                object-fit: cover;
            }
        }
    }

    .bottom {

        position: absolute;
        left: 5%;
        bottom: 10%;
        width: 90%;
        height: 50px;

        .circle {
            width: 100%;
            object-fit: cover;
        }
    }
}

@keyframes move {
    25% {
        transform: translateY(-10px);
    }

    75% {
        transform: translateY(10px);
    }
}
</style>